<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 200px;
				height: 200px;
				border: 1px solid red;
				background: yellowgreen;
				position: absolute;
				top: 20px;
				left: 20px;
				opacity: 0.6;
				/*默认隐藏*/
				display: none;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<!--广告-->
		<div id="box1">
			<input type="button" name="btn" id="btn" onclick="guanbi()" value="关闭" />
		</div>
		
		<video src="movie长视频.webm" id="video"></video>
		<!--显示控件controls="controls"-->
		<!--循环播放loop="loop"-->
		<!--自动播放autoplay="autoplay"-->
		<br />
		<input type="button" value="播放" onclick="bofang()"/>
		<input type="button" value="暂停" onclick="tingzhi()"/>
		
		<script type="text/javascript">
			var myvideo=document.getElementById("video");
			var mybox= document.getElementById("box1");
			
			function bofang(){
				myvideo.play();  //播放
			}
			function tingzhi(){
				myvideo.pause(); //暂停
				mybox.style.display = "block"; //暂停时，显示广告
			}
			function guanbi(){
				mybox.style.display = "none";   //关闭广告，隐藏
				myvideo.play(); //关闭广告之后继续播放
			}
		</script>
	</body>
</html>
